import {StyleSheet} from 'react-native';
import {size, colors} from '@/config';
const {px} = size;

export const styles = StyleSheet.create({
  textColor: {
    color: colors.black,
  },

  banner: {
    width: '100%',
    height: '100%',
  },
  typeWrap: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    marginVertical: px(20),
    paddingHorizontal: px(10),
  },
  type: {
    width: '25%',
    height: px(80),
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
  },
  typeImg: {
    height: px(40),
    width: px(40),
    marginBottom: 5,
  },
  typeSImg: {
    height: px(48),
    width: px(48),
    marginBottom: 5,
  },
  notice: {
    width: '100%',
    height: px(44),
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: px(20),
    backgroundColor: '#FAFAFA',
  },
  noticeIcon: {
    marginRight: px(10),
  },
  vegetableWrap: {
    flexDirection: 'row',
    paddingHorizontal: 6,
    marginVertical: px(20),
  },
  vegetable: {
    width: px(90),
    alignItems: 'center',
    marginHorizontal: 6,
  },
  vegetableImg: {
    width: px(90),
    height: px(90),
    marginBottom: 5,
  },
  sell: {
    marginVertical: px(20),
  },
  sellTitle: {
    height: px(50),
    paddingHorizontal: px(16),
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  sellTitleText: {
    fontSize: px(20),
    marginRight: px(10),
    color: colors.black,
  },
  sellText: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  sellTime: {
    flexDirection: 'row',
  },
  timeText: {
    backgroundColor: colors.black,
    color: colors.white,
    borderRadius: 3,
    paddingHorizontal: 2,
  },
  sellMore: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  goodsList: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingHorizontal: px(16),
    paddingVertical: 8,
  },
  goodsImg: {
    height: px(104),
    width: px(104),
    marginBottom: 3,
  },
  priceWrap: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginTop: 3,
  },
  price: {
    color: colors.red,
  },
  recommend: {
    height: px(180),
    flexDirection: 'row',
    marginVertical: px(24),
    paddingHorizontal: px(16),
  },
  purchaseWrap: {
    width: '50%',
    backgroundColor: '#F7E9D2',
    padding: px(10),
  },
  purchaseTitle: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  recommendTitle: {
    fontSize: px(20),
    fontWeight: '800',
    marginRight: px(10),
    color: colors.black,
  },
  purchaseList: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    paddingLeft: px(30),
  },
  purchase: {
    alignItems: 'center',
    marginLeft: px(10),
    marginTop: 5,
  },
  purchaseImg: {
    height: px(40),
    width: px(48),
  },
  nearWrap: {
    width: '50%',
    marginLeft: 2,
    justifyContent: 'space-between',
  },
  near: {
    height: px(89),
    padding: px(10),
  },
  nearImgWrap: {
    flexDirection: 'row-reverse',
  },
  nearImg: {
    height: px(48),
    width: px(48),
  },
  ranking: {
    paddingHorizontal: px(16),
    paddingVertical: px(24),
  },
  rankingTitleWrap: {
    marginBottom: px(10),
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  rankingTitle: {
    fontSize: px(20),
    color: colors.black,
  },
  rules: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  rulesText: {
    marginRight: 5,
    color: colors.black,
  },
  rankingItem: {
    height: px(42),
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  rankingItemTitle: {
    flexDirection: 'row',
  },
  rankingNum: {
    height: px(24),
    width: px(24),
    borderRadius: px(20),
    textAlign: 'center',
    marginRight: 8,
    fontSize: px(16),
  },
  rankingText: {
    fontSize: px(16),
    color: colors.black,
  },
  findMore: {
    marginTop: px(16),
    textAlign: 'center',
  },
  recoGoodTitleText: {
    fontSize: px(18),
    marginHorizontal: 5,
  },
  goodsPrice: {
    color: colors.red,
    fontWeight: '800',
  },
  goodsInfo: {
    flexDirection: 'row',
  },
  goodsAddress: {
    marginLeft: px(10),
  },
  pushWrap: {
    width: '100%',
    flexDirection: 'row',
    justifyContent: 'center',
  },
  push: {
    alignItems: 'center',
  },
  pushImg: {
    height: px(45),
    width: px(45),
    marginBottom: 5,
    marginHorizontal: px(50),
  },
  pushTitle: {
    color: colors.black,
  },
  closeIcon: {
    width: '100%',
    height: px(30),
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: px(20),
  },
});
